<template>
<div class="common-page home">
  <div class="case-base-info-wrap">
    <case-base-info></case-base-info>
  </div>
  <div class="south-wrap">
    <div class="west-south">
      <div class="card-btns">
        <div class="card-btn" v-for="(item, index) in cardBtns" :key="index">
          <div class="card-btn-body">
            <div class="icon-wrap">
              <em :class="item.icon"></em>
            </div>
            {{item.label}}({{item.number}})
          </div>
        </div>
      </div>
      
      <div class="detective-push-wrap">
        <div class="title-block">
          <div class="title-block-title">智能研判推送</div>
          <div class="title-block-content" style="padding:0 5px">
            <detective-push></detective-push>
          </div>
        </div>
        
      </div>
    </div>
    <div class="east-south">
      <div class="detective-info title-block">
        <div class="title-block-title">侦办动态</div>
        <div class="title-block-content">
          <div class="list" v-for="i in 6" :key="i">
            <xdh-image-text style="width:100%;">
              <xdh-avatar slot="image">H{{i}}</xdh-avatar>
              <template slot="text">
                <div>内容描述 this is description.this is description.this is description.this is description</div>
              </template>
            </xdh-image-text> 
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>
</template>

<style lang="scss" scoped>
@import "../../../src/style/_vars.scss";
.home{
  overflow: auto;
  padding: 10px;
  background: $--background-color-base;
  .case-base-info-wrap{
    margin-bottom: 20px;
  }
  .south-wrap{
    display:flex;
    flex-flow: row nowrap;
    min-height: 500px;
    .west-south{
      flex: 1;
      display:flex;
      flex-flow: column;
      margin-right: 20px;
      .card-btns{
        flex: 0 0 auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        padding: 5px 20px;
        background: white;
        margin-bottom: 10px;
        .card-btn{
          flex: 0 0 18%;
          margin: 8px 0;
          position: relative;
          background: $--border-color-light;
          &-body{
            display: flex;
            width: 100%;
            align-items: center;
            .icon-wrap{
              position: relative;
              flex: 0 0 35%;
              width: 35%;
              height: 0;
              padding-top: 35%;
              >em{
                position: absolute;
                display: block;
                width: 35%;
                left: 20%;
                top: 50%;
                transform: translateY(-50%);
                font-size: 2.6em;
                color: $--color-primary;
              }
            }
          }
        }
      }
      .detective-push-wrap{
        flex: 1;
      }
    }
    .east-south{
      flex: 0 0 40%;
      .detective-info{
        .list{
          padding: 20px 5px;
        }
      }
    }
  }
  
  
}
</style>

<script>
import XdhAvatar from '@/widgets/xdh-avatar'
import XdhImageText from '@/widgets/xdh-image-text'
import CaseBaseInfo from '../components/home/case-base-info'
import DetectivePush from '../components/home/detective-push/index'
export default {
  name: 'home',
  components: {
    CaseBaseInfo,
    XdhAvatar,
    XdhImageText,
    DetectivePush
  },
  props: {
  },
  data() {
    return {
      cardBtns: [
        {label: '涉案人员', number: 1, icon: 'iconfont icon-organiz'},
        {label: '周边视频', number: 1, icon: 'iconfont icon-inside-play'},
        {label: '现场勘探', number: 1, icon: 'iconfont icon-call'},
        {label: '电子话单', number: 1, icon: 'iconfont icon-files'},
        {label: '标识号', number: 1, icon: 'iconfont icon-approval'},
        {label: '电子笔录', number: 1, icon: 'iconfont icon-word'},
        {label: '电子围栏', number: 1, icon: 'iconfont icon-rss'},
        {label: '涉案物品', number: 1, icon: 'iconfont icon-folder-open'},
        {label: '涉案组织', number: 1, icon: 'iconfont icon-base-signal'},
        {label: '法律文书', number: 1, icon: 'iconfont icon-floor-building'}
      ]
    }
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

